<template>
	<view class="shop">
		<view class="wrape flex">
			<view class="item" @click="changeHandler(0)">
				<view class="miantilte" :class="current==0?'active':'miantitle'">
					同城商品
				</view>
				<view class="subtitle">
					骑手1小时达
				</view>
			</view>
			<view class="item" @click="changeHandler(1)">
				<view class="miantilte" :class="current==1?'active':'miantitle'">
					门店服务
				</view>
				<view class="subtitle">
					看病洗澡开卡
				</view>
			</view>
		</view>
		<view class="goodslist">
			<block v-if="current==0">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view class="flex wrap bt" style="padding: 20rpx;margin-top: 20rpx;">
						<view class="gooditem" v-for="item in goodsList" :key="item._id" @click="gogoods(item)"
							style="width: 330rpx;height: 420rpx;background-color: #fff;border-radius: 24rpx; border:1px solid;margin: 20rpx 0;">
							<view class="top relative" style="width: 100%;height: 300rpx;">
								<view class="absolute counts" style="bottom:20rpx;left:20rpx;">
									浏览量：{{item.count>1000?'999+':item.count}}
								</view>
								<image :src="item.swiperList[0]" mode=""
									style="width: 100%;height: 100%;border-radius: 24rpx 24rpx 0 0;"></image>
							</view>
							<view class="bot relative"
								style="width: 100%;height: 120rpx;background-color: azure;border-radius: 0 0 24rpx 24rpx ;">
								<view class="name pl-24" style="font-size: 24rpx; width: 90%; height: 68rpx;overflow: hidden;">
									{{item.name}} 、{{item.note}} 、{{item.detail}}、{{item.old}}
								</view>
								<view class="price pl-24 absolute" style="font-size: 26rpx;bottom: 16rpx;right: 20rpx;color: orange;">
									￥ {{item.money}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</block>
			<block v-if="current==1">
				<view class="titles" style="padding-left: 20rpx;font-weight: 700;margin-top: 20rpx;">
					热门服务
				</view>
				<view class="flex wrap bt" style="padding: 20rpx;margin-top: 20rpx;">
					<view class="left" style="width: 50%;height: 650rpx;border:1px solid;border-radius: 24rpx;">
						疫苗服务
					</view>
					<view class="rightwrap" style="width: 45%; height: 650rpx;">

						<view class="top" style="width: 100%; height: 320rpx;border: 1px solid #000;border-radius: 24rpx;">
							绝育
						</view>
						<view class="bot"
							style="width: 100%; height: 300rpx;border: 1px solid #000;border-radius: 24rpx;margin-top: 20rpx;">
							洗澡，造型修剪
						</view>
					</view>
				</view>
				<view class="text" style="padding-left: 20rpx;font-weight: 700;">
					附近门店
				</view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view class="flex wrap bt" style="margin: 0 20rpx;">
						<view class="gooditem" v-for="item in 12" :key="item"
							style="width: 330rpx;height: 420rpx;background-color: #fff;border-radius: 24rpx; border:1px solid;margin: 20rpx 0;">
							<view class="top" style="width: 100%;height: 300rpx;">
								<image src="../../../static/logo.png" mode=""
									style="width: 100%;height: 100%;border-radius: 24rpx 24rpx 0 0;"></image>
							</view>
							<view class="bot"
								style="width: 100%;height: 120rpx;background-color: azure;border-radius: 0 0 24rpx 24rpx ;">

							</view>
						</view>
					</view>
				</scroll-view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				goodsList: []
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			changeHandler(e) {
				this.current = e
			},
			gogoods(item) {
				uni.navigateTo({
					url: `/subpack/goods/goods?goodsid=${item._id}`
				})
			},
			async getData() {
				let res = await wx.cloud.callFunction({
					name: 'logins',
					data: {
						useName: 'getGoods', //捡到、找到
						limit: 2,
					}
				})
				console.log("res:-", res.result)
				this.goodsList = res.result.data
			}
		}
	}
</script>

<style scoped lang="scss">
	.shop {
		// padding: $uni-spacing-row-base;
		background-color: $uni-text-color-placeholder;

		.wrape {
			height: 130rpx;
			padding: $uni-spacing-row-base;
			text-align: center;
			justify-content: space-evenly;
			background: linear-gradient(to bottom, #FFB300, #fff);

			.miantilte {
				// color: #fff;
				font-weight: 700;

			}

			.subtitle {
				font-size: $uni-font-size-sm;
			}

			.active {
				// height: 40rpx;
				border-radius: $uni-border-radius-sm;
				background: linear-gradient(#FFB300, #fff);
				transform: scale(1.15);
				transition: all 0.2s;
			}
		}
			.counts {
				bottom: 155rpx;
				left: 10rpx;
				color: #ffffff;
				font-size: 24rpx;
				background-color: #7d7d7d;
				padding: 12rpx;
				border-radius: 8rpx;
				opacity: .8;
			}
	}
</style>